<template>
  <div class="swiperContainer">
    <!-- swiper -->
    <swiper :options="swiperOption" class="swiper-box" ref="swiperList" @slideChange="slideChange">
      <swiper-slide v-for="(item,k) in shopList" :key="k" class="item-inclass">
        <div class="title" @click="getItem(k)">{{item.title}}</div>
        <!-- <div class="title" @click="{nowStep=k}">{{item.title}}</div> --> 
        <span :class="{image:nowStep==k}"></span> <!-- 判断span是否绑定图片显示控制 -->
        
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        slidesPerView: 6,
        spaceBetween: 0,
        // loop: true,
        navigation: {
          // nextEl: '.swiper-button-next',
          // prevEl: '.swiper-button-prev'
        }
      },
      swipe: null,
      nowStep:0,
      // j: function(k){
      //     this.nowStep=k ? true : false //行不通这种写法  
      //   },  
      // k:0, 
      shopList: [
        {
          id: 1,
          title: "关注",
        },
        {
          id: 2,
          title: "推荐"
        },
        {
          id: 3,
          title: "问答"
        },
        {
          id: 4,
          title: "生活"
        },
        {
          id: 5,
          title: "时尚"
        },
        {
          id: 6,
          title: "美妆"
        },
        {
          id: 7,
          title: "娱乐"
        }
      ]
    };
  },
  mounted(){
    console.log(this.$refs.swiperList.swiper.activeIndex); //拿到的是index = 0
    // this.slideChange()
  },
  methods:{
    slideChange(){
      // this.nowStep = this.$refs.swiperList.swiper.activeIndex-6 //可以不要这个slideChange方法,删除好了！！
    },
    getItem(k){
      this.nowStep = k;
      // this.k = k; 
      console.log(k);//点击第几个 this.k 就是等于变化的赋值k
    }
  }
};
</script>

<style lang="less" scoped>
// 这个组件默认是紧紧地贴在SearchBar的下面,因为都是块级元素
.swiperContainer {
  top: 0;
  width: 100%;
  height: 1.3rem;
  overflow: hidden;
  background: linear-gradient(to top, #ef191c 0%, #e60106 100%);
  .swiper-container{
    margin-left: 0.4rem;  
  }
  .swiper-wrapper {
    .swiper-slide {
      position: relative;
      width: 1.14rem !important;
      line-height: 1.3rem;
      text-align: center;
      color: #fff5f5;
      font-size: 0.24rem;
     
    }
  }
}
.item-inclass{
  position: relative;
}
 .image {
        position: absolute;
        display: inline-block;
        width: 0.4rem;
        height: 0.04rem;
        margin-top: -0.04rem;
        margin-left: 0.16rem;
        left: 0.2rem;
        top: 1rem;
        background-image: url("../../assets/images/forumProducts/selected.png");
        background-size: 100% 100%;
      }
</style>
